<template>
  <page-meta :root-font-size="fontsize" class="pay-service">
    <xlNavBar :showLeft="true" title="付费展示" bgc="ff9d49"></xlNavBar>

    <view class="ps-container">
      <view class="c-header">
        <view class="h-title">当前选择曝光地区</view>
        <view class="h-swapper">
          <view class="label">
            <view class="item">
              江苏省
              <view class="icon">x</view>
            </view>
            <view class="item">
              陕西省
              <view class="icon">x</view>
            </view>
          </view>
          <view class="operate">
            <img class="icon" src="./image/add-icon.png" mode="widthFix" />
            <view class="text">添加更多</view>
          </view>
        </view>
      </view>
    </view>

    <view class="ps-content">
      <view class="c-header">
        <view class="h-title">当前选择2个地区，享受8折优惠!</view>
        <view class="h-info">
          直降￥130
          <img class="icon" src="./image/down-img.png" mode="widthFix" />
        </view>
      </view>
      <view class="c-swapper">
        <view class="s-title">再多选1个区域曝光可享受7折</view>
        <view class="s-main">
          <view class="info">省级￥521+市级￥128=￥649</view>
          <view class="main">
            <img class="icon" src="./image/down-icon.png" mode="widthFix" />
            <text class="text">折后￥ </text>
            <text class="num">519</text>
            <img class="icon" src="./image/down-icon.png" mode="widthFix" />
          </view>
          <view class="state">当前优惠</view>
        </view>
      </view>
    </view>

    <view class="ps-operate">
      立即推广￥519
      <view class="state">曝光365天，一单回本</view>
      <view class="icon"></view>
    </view>

    <view class="ps-btn"> 暂不付费 </view>

    <view class="ps-info">
      <view>须知：</view>
      <view>1.按照曝光范围进行收费，总费用=展示范围*单位收费</view>
      <view>2.全国，省，市收费标准不同 </view>
      <view>3.发布后，展示时长为365天，无其他收费</view>
      <view>4.曝光期间，用户可无限次免费与您联系</view>
    </view>

    <view class="ps-text"> 全国实收1460 直辖市521 省级521 市级128 </view>
  </page-meta>
</template>

<script>
export default {
  name: "PayService",
  data() {
    return {
      fontsize: ""
    };
  },

  onLoad(options) {
    let designWidth = 37.5;
    uni.onWindowResize((res) => {
      this.fontsize =
        Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
    });
    uni.getSystemInfo({
      success: (res) => {
        this.fontsize =
          Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
      }
    });
  },
  methods: {}
};
</script>

<style scoped lang="scss">
.pay-service {
  width: 100vw;
  padding-bottom: 20px;
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  .ps-container {
    width: 100%;
    height: 265px;
    display: flex;
    justify-content: center;
    background: linear-gradient(98deg, #fcbf32 0%, #fc8d32 100%);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    .c-header {
      display: flex;
      flex-direction: column;
      width: calc(100% - 20px);
      height: 98px;
      box-sizing: border-box;
      padding: 15px;
      margin-top: 110px;
      background: #ffffff;
      border-radius: 8px;
      .h-title {
        color: #333333;
        font-weight: 600;
        line-height: 22px;
        font-size: 16px;
      }
      .h-swapper {
        margin-top: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .label {
          display: flex;
          .item {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 10px;
            margin-right: 10px;
            height: 32px;
            background: rgba(83, 206, 120, 0.15);
            font-size: 14px;
            color: #53ce78;
            border-radius: 4px;
            .icon {
              position: absolute;
              z-index: 10;
              right: -4px;
              top: -4px;
              width: 16px;
              height: 16px;
              line-height: 16px;
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 12px;
              color: #ffffff;
              background: #53ce78;
            }
          }
        }
        .operate {
          width: 96px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #53ce78;
          border-radius: 4px;
          .icon {
            width: 14px;
            height: 14px;
          }
          .text {
            color: #ffffff;
            font-size: 14px;
          }
        }
      }
    }
  }

  .ps-content {
    width: calc(100% - 20px);
    margin-top: -44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(270deg, #f85c34 0%, #ff8e71 99%);
    border-radius: 8px 8px 10px 10px;
    .c-header {
      width: calc(100% - 20px);
      padding: 10px 5px 0 15px;
      display: flex;
      justify-content: space-between;
      .h-title {
        font-size: 16px;
        color: #ffffff;
      }
      .h-info {
        width: 94px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fffbb8;
        border-radius: 4px;
        color: #af9a46;
        font-size: 14px;
        .icon {
          margin-left: 4px;
          width: 8px;
          height: 12px;
        }
      }
    }
    .c-swapper {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      background: #ffffff;
      border-radius: 8px;
      width: calc(100% - 30px);
      padding: 15px;
      .s-title {
        font-size: 16px;
        color: #333333;
        font-weight: 600;
      }
      .s-main {
        position: relative;
        margin-top: 10px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: rgba(246, 77, 48, 0.1);
        border-radius: 4px;
        .info {
          margin-top: 10px;
          color: #95736d;
          font-size: 16px;
          line-height: 22px;
          font-weight: 600;
        }
        .main {
          margin-top: 5px;
          display: flex;
          align-items: center;
          color: #f9623b;
          font-weight: 600;
          .icon {
            margin: 0 10px;
            width: 8px;
            height: 12px;
          }
          .text {
            font-size: 16px;
          }
          .num {
            font-size: 24px;
          }
        }
        .state {
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 10;
          width: 80px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          background: linear-gradient(270deg, #f85c34 0%, #ff8e71 99%);
          border-radius: 0 10px 0 10px;
          color: #ffffff;
          font-size: 16px;
        }
      }
    }
  }

  .ps-operate {
    position: relative;
    margin-top: 60px;
    width: calc(100% - 30px);
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: #53ce78;
    border-radius: 28px;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    .state {
      position: absolute;
      right: 0;
      top: -56px;
      z-index: 10;
      width: 162px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 8px;
      background: linear-gradient(98deg, #fcbf32 0%, #fc8d32 100%);
      font-size: 14px;
    }
    .icon {
      position: absolute;
      right: 120px;
      top: -16px;
      z-index: 10;
      width: 0;
      height: 0;
      border-top: 10px solid #fcbf32;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
    }
  }

  .ps-btn {
    margin-top: 25px;
    color: #999999;
    font-size: 16px;
    font-weight: 600;
  }

  .ps-info {
    margin-top: 25px;
    width: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #999999;
    line-height: 20px;
  }

  .ps-text {
    margin-top: 14px;
    width: calc(100% - 70px);
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #e6ede8;
    border-radius: 4px;
    font-size: 12px;
    color: #829f8b;
  }
}
</style>
